<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-select
        v-if="jobFilters['app_channel']"
        v-model="listQuery.app_channel"
        clearable
        filterable
        placeholder="渠道"
      >
        <el-option
          v-for="option in jobFilters['app_channel']"
          :key="option"
          :value="option"
          :label="option"
        ></el-option>
      </el-select>
      <el-select
        v-if="jobFilters['app_version']"
        v-model="listQuery.app_version"
        clearable
        filterable
        placeholder="版本"
      >
        <el-option
          v-for="option in jobFilters['app_version']"
          :key="option"
          :value="option"
          :label="option"
        ></el-option>
      </el-select>
      <el-select
        v-if="jobFilters['app_name']"
        v-model="listQuery.app_name"
        clearable
        filterable
        placeholder="包名"
      >
        <el-option
          v-for="option in jobFilters['app_name']"
          :key="option"
          :value="option"
          :label="option"
        ></el-option>
      </el-select>
      <el-select
        v-if="jobFilters['gender']"
        v-model="listQuery.gender"
        clearable
        filterable
        placeholder="性别"
      >
        <el-option
          v-for="option in jobFilters['gender']"
          :key="option"
          :value="option"
          :label="option"
        ></el-option>
      </el-select>
      <el-select
        v-if="jobFilters['tags']"
        v-model="listQuery.tags"
        clearable
        filterable
        placeholder="标签"
      >
        <el-option
          v-for="option in jobFilters['tags']"
          :key="option"
          :value="option"
          :label="option"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>

    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          v-for="(column, i) in columns"
          :key="i"
          align="center"
          :label="column.desc"
        >
          <template scope="{row}">{{ row[column.fieldName] }}</template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
import {
  jobFilters,
  rawJobData,
  jobData
} from '@/api/bx';
import TablePagination from '@/components/TablePagination'

export default {
  name: 'ResultList',
  components: { TablePagination },
  data() {
    return {
      jobFilters: {},
      list: [],
      total: 0,
      columns: [],
      job_id: this.$route.query.id,
      display_raw_data: this.$route.query.raw || 0,
      daterangeValue: '',
      listLoading: true,
      listQuery: {
        app_channel: null,
        app_version: null,
        app_name: null,
        gender: null,
        tags: null,
        limit: 50,
        offset: 0,
        page: 1
      }
    }
  },
  created() {
    this.getFilters()
    this.doSearch()
  },
  methods: {
    doSearch() {
      const query = Object.assign({}, this.listQuery)
      delete query.page
      if (this.display_raw_data) {
        rawJobData(this.job_id, query).then(resp => {
          // this.columns = resp.data.columns
          this.list = resp.data.list
          this.total = resp.data.count
          if (this.list) {
            const sample = this.list[0]
            const columns = []
            for (const k in sample) {
              columns.push({
                fieldName: k,
                desc: k
              })
            }
            this.columns = columns
          }
          this.listLoading = false
        })
      } else {
        jobData(this.job_id, query).then(resp => {
          this.columns = resp.data.columns
          this.list = resp.data.list
          this.total = resp.data.count
          this.listLoading = false
        })
      }
    },
    getFilters() {
      jobFilters(this.job_id).then(resp => {
        // this.list = resp.data.list
        // this.total = resp.data.count
        this.jobFilters = resp.data.list
      })
    }
  }
}
</script>

<style scoped>

</style>
